import 'package:flutter/material.dart';
import 'package:sz/tools/color.dart';
import 'package:sz/tools/rpx.dart';
import './shouzhu_menu.dart';

class ShouzhuPage extends StatefulWidget {
  const ShouzhuPage({Key? key}) : super(key: key);

  @override
  ShouzhuPageState createState() => ShouzhuPageState();
}

class ShouzhuPageState extends State<ShouzhuPage> {
  late List<Map<String, dynamic>> shouzhuMenuData = ShouzhuMenu().data;

  @override
  void initState() {
    // FPrint('init- $shouzhuMenuData');

    super.initState();
    // 获取数据
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: SzColor.f4f4f4,
      body: Column(children: [
        // 头部
        buildHeader(),
        Expanded(
          child: RefreshIndicator(
              onRefresh: () async {
                FPrint('下刷新');
              },
              child: ListView(
                padding: EdgeInsets.only(top: rpx(30)),
                children: [
                  // SizedBox(
                  //   height: MediaQuery.of(context).padding.top,
                  // ),

                  buildBodyOne(shouzhuMenuData[0]),
                  buildBodyOne(shouzhuMenuData[1]),
                  buildBodyThree(shouzhuMenuData[2]),
                  SizedBox(
                    height: rpx(60),
                  )
                ],
              )),
        ),
      ]),
    );
  }

  // 第三项
  Widget buildBodyThree(Map<String, dynamic> item) {
    return Container(
      margin: EdgeInsets.only(
        left: rpx(24),
        right: rpx(24),
        bottom: rpx(24),
      ),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(
          rpx(20),
        ),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            width: rpx(702),
            margin: EdgeInsets.only(
              bottom: rpx(10),
            ),
            decoration: BoxDecoration(
              border: Border(
                bottom:
                    BorderSide(width: rpx(1), color: const Color(0xffE9E9E9)),
              ),
            ),
            padding: EdgeInsets.only(
              left: rpx(24),
              top: rpx(24),
              bottom: rpx(24),
            ),
            child: Text(
              item['title'],
              style: TextStyle(
                fontWeight: FontWeight.w600,
                fontSize: rpx(32),
              ),
            ),
          ),
          Column(
            children: item['dataList'].map<Widget>(
              (one) {
                return Container(
                  decoration: BoxDecoration(
                      border: Border(
                    bottom: BorderSide(
                        width: rpx(1), color: const Color(0xffE9E9E9)),
                  )),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Container(
                        padding: EdgeInsets.only(
                          left: rpx(24),
                          top: rpx(24),
                          bottom: rpx(35),
                        ),
                        child: Text(
                          one['title'],
                          style: const TextStyle(fontWeight: FontWeight.w600),
                        ),
                      ),
                      Wrap(
                        children: one['dataTwo'].map<Widget>((two) {
                          return itemOne(two);
                        }).toList(),
                      ),
                    ],
                  ),
                );
              },
            ).toList(),
          )
        ],
      ),
    );
  }

// 每一项
  Container buildBodyOne(Map<String, dynamic> item) {
    return Container(
      margin: EdgeInsets.only(
        left: rpx(24),
        right: rpx(24),
        bottom: rpx(24),
        top: rpx(0),
      ),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(
          rpx(20),
        ),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            width: rpx(702),
            margin: EdgeInsets.only(
              bottom: rpx(10),
            ),
            decoration: BoxDecoration(
              border: Border(
                bottom:
                    BorderSide(width: rpx(1), color: const Color(0xffE9E9E9)),
              ),
            ),
            padding: EdgeInsets.only(
              left: rpx(24),
              top: rpx(24),
              bottom: rpx(24),
            ),
            child: Text(
              item['title'],
              style: TextStyle(
                fontWeight: FontWeight.w600,
                fontSize: rpx(32),
              ),
            ),
          ),
          Wrap(
            children: item['dataList'].map<Widget>((e) {
              return itemOne(e);
            }).toList(),
          ),
        ],
      ),
    );
  }

  // 每一项
  Widget itemOne(Map<String, dynamic> one) {
    return SizedBox(
      width: rpx(234),
      height: rpx(160),
      child: Column(
        children: [
          Image.asset(
            one['icon'],
            width: rpx(90),
            height: rpx(90),
          ),
          Text(
            one['title'],
            style: TextStyle(fontSize: rpx(26), color: SzColor.c3),
          )
        ],
      ),
    );
  }

// 头部
  Container buildHeader() {
    return Container(
      padding: EdgeInsets.all(rpx(24)),
      decoration: const BoxDecoration(color: Colors.white),
      child: Column(
        children: [
          SizedBox(
            height: MediaQuery.of(context).padding.top,
          ),
          Row(
            children: [
              Text(
                '2号实验室',
                style: TextStyle(
                  fontWeight: FontWeight.w700,
                  fontSize: setSp(40),
                ),
              ),
              Icon(
                Icons.arrow_drop_down,
                size: rpx(60),
              )
            ],
          ),
          SizedBox(
            height: rpx(10),
          ),
          Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Container(
                decoration: BoxDecoration(
                  color: const Color(0xffF5aF3E),
                  borderRadius: BorderRadius.circular(
                    rpx(100),
                  ),
                ),
                padding: EdgeInsets.symmetric(
                  // vertical: rpx(6),
                  horizontal: rpx(20),
                ),
                alignment: Alignment.center,
                child: Text(
                  '施工',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: setSp(26),
                  ),
                ),
              ),
              SizedBox(
                width: rpx(20),
              ),
              const Text('西藏施工')
            ],
          ),
          SizedBox(
            height: rpx(10),
          ),
          Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              const Text('角色:'),
              SizedBox(
                width: rpx(10),
              ),
              const Text('--')
            ],
          ),
        ],
      ),
    );
  }
}
